<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{color:red}
    </style>
</head>
<body>
    <p>文字</p>
    <p>文字2</p>
<script>
/* 
1. dom
2. 
3.  
*/
// dom 浏览器已经初始化好的树形结构

// Dom 节点操作
// 01 Dom是哪种数据结构
// 02 Dom常用操作API
// 03 attr 和 property 区别
// byID,ByTagName,ByClassName,selector,selectorAll

// propery形式 获取dom元素通过js属性方式操作
p.style.width ="100px";
p.className = "p1";

console.log(p.nodeName,p.nodeType) //1是 元素节点


//  attibute形式
p1.setAttribute("data-name","mumu");
p1.getAtrribute("data-name")
// 自定义属性通过 attribute能执行在dom标签中显示

// property：修改对象属性，不会体现到html结构值
// atribute: 修改html属性会改变html结构
// 两者都会引起dom重新渲染


// 新增插入节点
// appendChild(p1);  // 如果是已有元素就是移动节点

//  父节点 p1.parentNode

//  子节点 p1.chidNodes  nodeType==1 元素节点



// Dom 性能
// DOM 操作昂贵，避免频繁操作DOM
// 对DOM 查询做缓存
// 将频繁操作改为一次性操作

// 不缓存
for(let i=0; i<document.getElementsByTagName("p").length;i++){
    // 每次循环，都会计算length，频繁进行dom查询
}

// 缓存
const plist = document.getElementsByTagName("p");
const length = plist.length;
for(let i=0;i<length;i++){
    // 缓存length 只进行一次dom查询
}

//  讲频繁操作改变一次性操作

const listNode = document.getElementById("list");
// 创建一个文档片段，此时还没有插入dom树中
const frag = document.createDocumentFragment();
// 执行插入
for(let x = 0; x<10;x++){
    const li = document.createElement("li");
    li.innerHTML = "list item "+x;
    frag.appendChild("li");
}
//  都完成后 再插入DOM树中
listNode.appendChild(frag);

//  问题解答
// 01 一次性插入多个DOM节点 考虑性能
// 02 DOM是那种数据结构
//   数（DOM树）
</script>
</body>
</html>